<template>
  <div class="auth-renewal-container">
    <!-- 页面标题 -->
    <div class="mb-6">
      <h1 class="text-2xl font-bold text-neutral-800 dark:text-neutral-100">授权续期</h1>
    </div>

    <!-- 用户信息卡片 -->
    <div class="bg-white dark:bg-neutral-800 rounded-lg shadow-sm p-8 mb-6">
      <div class="grid grid-cols-2 gap-6 max-w-4xl mx-auto">
        <div class="flex">
          <div class="w-40 bg-neutral-200 dark:bg-neutral-700 px-4 py-3 font-medium text-neutral-700 dark:text-neutral-300">
            申请人
          </div>
          <div class="flex-1 border border-neutral-200 dark:border-neutral-600 px-4 py-3 text-neutral-800 dark:text-neutral-100">
            周宇轩
          </div>
        </div>

        <div class="flex">
          <div class="w-40 bg-neutral-200 dark:bg-neutral-700 px-4 py-3 font-medium text-neutral-700 dark:text-neutral-300">
            申请单位
          </div>
          <div class="flex-1 border border-neutral-200 dark:border-neutral-600 px-4 py-3 text-neutral-800 dark:text-neutral-100">
            jrlc
          </div>
        </div>

        <div class="flex">
          <div class="w-40 bg-neutral-200 dark:bg-neutral-700 px-4 py-3 font-medium text-neutral-700 dark:text-neutral-300">
            设备标识
          </div>
          <div class="flex-1 border border-neutral-200 dark:border-neutral-600 px-4 py-3 text-neutral-800 dark:text-neutral-100">
            xxxxxxxxx
          </div>
        </div>

        <div class="flex">
          <div class="w-40 bg-neutral-200 dark:bg-neutral-700 px-4 py-3 font-medium text-neutral-700 dark:text-neutral-300">
            续期时间
          </div>
          <div class="flex-1 border border-neutral-200 dark:border-neutral-600 px-4 py-3 text-neutral-800 dark:text-neutral-100">
            一个月
          </div>
        </div>

        <div class="flex">
          <div class="w-40 bg-neutral-200 dark:bg-neutral-700 px-4 py-3 font-medium text-neutral-700 dark:text-neutral-300">
            授权证书编号
          </div>
          <div class="flex-1 border border-neutral-200 dark:border-neutral-600 px-4 py-3 text-neutral-800 dark:text-neutral-100">
            123321
          </div>
        </div>

        <div class="flex">
          <div class="w-40 bg-neutral-200 dark:bg-neutral-700 px-4 py-3 font-medium text-neutral-700 dark:text-neutral-300">
            到期时间
          </div>
          <div class="flex-1 border border-neutral-200 dark:border-neutral-600 px-4 py-3 text-neutral-800 dark:text-neutral-100">
            2025/10/30
          </div>
        </div>
      </div>
    </div>

    <!-- 授权续期弹窗 -->
    <div class="bg-white dark:bg-neutral-800 rounded-lg shadow-sm p-8 max-w-4xl mx-auto">
      <div class="bg-cyan-50 dark:bg-cyan-900/30 px-4 py-2 mb-6 inline-block">
        <span class="text-neutral-800 dark:text-neutral-100 font-medium">授权续期弹窗</span>
      </div>

      <div class="border border-neutral-200 dark:border-neutral-600 p-8">
        <div class="space-y-4 max-w-md mx-auto">
          <div 
            v-for="period in periods" 
            :key="period.value"
            class="flex items-center justify-between py-3 px-4 border border-neutral-200 dark:border-neutral-600 cursor-pointer hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-all"
            @click="selectedPeriod = period.value"
          >
            <span class="text-neutral-800 dark:text-neutral-100">{{ period.label }}</span>
            <div 
              class="w-6 h-6 rounded-full border-2 flex items-center justify-center transition-all"
              :class="selectedPeriod === period.value ? 'border-primary-500' : 'border-neutral-300'"
            >
              <div 
                v-if="selectedPeriod === period.value"
                class="w-3 h-3 rounded-full bg-primary-500"
              ></div>
            </div>
          </div>
        </div>

        <!-- 保存按钮 -->
        <div class="flex justify-center mt-8">
          <el-button type="primary" size="large" @click="savePeriod" class="w-32">
            保存
          </el-button>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="flex gap-4 justify-center mt-8">
        <el-button type="primary" size="large" @click="submitRenewal" class="w-32">
          提交申请
        </el-button>
        <el-button size="large" @click="cancel" class="w-32">
          取消
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()

const selectedPeriod = ref('一个月')

const periods = [
  { label: '一个月', value: '一个月' },
  { label: '三个月', value: '三个月' },
  { label: '半年', value: '半年' }
]

const savePeriod = () => {
  ElMessage.success(`已选择续期时间：${selectedPeriod.value}`)
}

const submitRenewal = () => {
  ElMessage.success('续期申请已提交')
  setTimeout(() => {
    router.push('/authorization/applications')
  }, 500)
}

const cancel = () => {
  router.back()
}
</script>

<style scoped>
.auth-renewal-container {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>

